<template>
	<view class="login">
		<u-toast ref="uToast"></u-toast>
		<view class="">
			<u-navbar :autoBack='true' bgColor='rgba(245,245,245,0.39)'></u-navbar>
		</view>
		<view class="login-main">
			<view class="login-img">
				<image src="../../static/logo.png" mode=""></image>
				<text>手机号登录</text>
			</view>
			<view class="login-text">首次登录手机将在验证后生成新账号</view>
			<view v-if="isCheck">
				<view class="login-phone">
					<input v-model="phone" type="tel" placeholder="请输入手机号" />
				</view>
				<view class="login-code">
					<button :class="isBtn?'active':''" @click="code" :disabled="isBtn">发送短信验证码</button>
				</view>
			</view>
			<view class="" v-else>
				<view class="login-user">
					<input v-model="user.name" type="text" placeholder="用户名" />
				</view>
				<view class="login-user">
					<input v-model="user.pwd" type="password" placeholder="密码" />
				</view>
				<view class="login-code">
					<button @click="login">登录</button>
				</view>
			</view>
			<view class="login-pwd" @click="loginUser">
				{{isCheck? '用户名和密码登录':'手机号登录' }}
			</view>
			<view class="login-msg">
				<u-checkbox-group @change="checkBtn">
					<u-checkbox shape="circle"></u-checkbox>
					<view class="msg-text">
						我已阅读并同意 <text>服务条款</text> 和 <text>隐私政策</text>
					</view>
				</u-checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	import {
		Encrypt
	} from '@/utils/aes.js'
	import {
		loginByJson
	} from '@/api/login.js'
	export default {
		data() {
			return {
				isBtn: true,
				phone: '',
				check: 0,
				isCheck: true,
				user: {
					name: '',
					pwd: ''
				}
			}
		},
		methods: {
			...mapMutations(['setToken']),
			code() {
				if (this.check) {
					uni.navigateTo({
						url: `/pages/login/code?tel=${this.phone}`,
					})
				} else {
					uni.showToast({
						title: '请查看服务条款和隐私协议',
						icon: 'error'
					})
				}

			},
			checkBtn(e) {
				this.check = e.length
			},
			loginUser() {
				this.isCheck = !this.isCheck
			},
			login() {
				if (this.check) {
					this.$refs.uToast.show({
						message: '正在登录中...',
						type: 'loading',
						debugger: 5000
					})
					loginByJson({
						username: Encrypt(this.user.name),
						password: Encrypt(this.user.pwd)
					}).then(data => {
						this.setToken(data.accessToken)
						// 返回我的页面
						uni.switchTab({
							url: '/pages/tabs/me'
						})
					})
				} else {
					uni.showToast({
						title: '请查看服务条款和隐私协议',
						icon: 'error'
					})
				}
			}
		},
		watch: {
			phone(newv, oldv) {
				let reg = /^1[23456789]\d{9}$/;
				this.isBtn = !reg.test(newv)

			}
		}
	}
</script>

<style>
	.login {
		display: flex;
		align-items: center;
		width: 100vw;
		height: 100vh;
		background: rgba(245, 245, 245, 0.39);
	}

	.login-main {
		flex: 1;
		margin: 0 58rpx;
	}

	.login-img {
		display: flex;
		align-items: center;
	}

	.login-img image {
		width: 83rpx;
		height: 83rpx;
	}

	.login-img text {
		padding-left: 22rpx;
		font-size: 56rpx;
		font-weight: bold;
		color: #343234;
	}

	.login-text {
		padding-top: 45rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #343234;
		letter-spacing: 2rpx;
		opacity: 0.53;
	}

	.login-phone {
		padding-top: 121rpx;
		padding-bottom: 31rpx;
		border-bottom: 2rpx solid #707070;
	}

	.login-user {
		padding: 24rpx 0;
		border-bottom: 2rpx solid #707070;
	}

	.login-code {
		padding-top: 88rpx;
	}

	.login-code button {
		width: 100%;
		line-height: 100rpx;
		font-size: 33rpx;
		font-weight: bold;
		color: #FFFFFF;
		letter-spacing: 8rpx;
		opacity: 1;
		background-color: #337AFF;
	}

	.login-code button.active {
		background: #ccc;

	}

	.login-pwd {
		font-size: 28rpx;
		font-weight: 400;
		color: #343234;
		letter-spacing: 2rpx;
		display: flex;
		justify-content: flex-end;
		padding-top: 18rpx;
	}

	.login-msg {
		padding-top: 38rpx;
	}

	/deep/ .u-checkbox-group {
		justify-content: center;
		align-items: center;
	}

	.msg-text {
		font-size: 24rpx;
		font-weight: 400;
		color: #343234;
		letter-spacing: 2rpx;
	}

	.msg-text text {
		color: #0077FF;
	}
</style>